<template>
  <el-card style="margin-top: 20px;">
    <img :src="qrcode" alt="QR Code" />
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from 'vue';
import QRCode from 'qrcode';
import axios from 'axios';

const props = defineProps({
  orderId: {
    type: Number,
    required: true,
  },
});

const qrcode = ref("");
const token = ref("");

// 使用 watch 监听 orderId 的变化
watch(
  () => props.orderId,
  (newOrderId) => {
    if (newOrderId) {
      axios.get(`/api/orders/order_token/${newOrderId}`).then((res) => {
        console.log(res);
        token.value = res.data.data.token;
        QRCode.toDataURL(`http://1.94.130.188/order_pay/${token.value}`)
          .then((url) => {
            qrcode.value = url;
          })
          .catch((err) => {
            console.error(err);
          });
      });
    }
  },
  { immediate: true } // 立即触发，以确保在组件挂载时生成二维码
);
</script>
